%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%
% Plantilla para un artculo en LaTeX en espaol.
%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

\documentclass[a4paper, 11pt, oneside]{article}


% idioma
\usepackage[utf8]{inputenc}
\usepackage[spanish]{babel}

%tablas
\usepackage{booktabs}

%rotar tablas
\usepackage{rotating}

%color tablas
\usepackage{colortbl}

%espaciado
\usepackage{setspace}
\onehalfspacing
\setlength{\parindent}{0pt}
\setlength{\parskip}{2.0ex plus0.5ex minus0.2ex}


%margenes según n. icontec
\usepackage{vmargin}
\setmarginsrb           { 4.0cm}  % left margin
                        { 3.0cm}  % top margcm
                        { 2.0cm}  % right margcm
                        { 3.0cm}  % bottom margcm
                        {  10pt}  % head height
                        {0.25cm}  % head sep
                        {   9pt}  % foot height
                        { 0.3cm}  % foot sep


% inserción url's notas de pie.
\usepackage{url}


% Paquetes de la AMS:
\usepackage{amsmath, amsthm, amsfonts}

% Teoremas
%--------------------------------------------------------------------------
\newtheorem{thm}{Teorema}[section]
\newtheorem{cor}[thm]{Corolario}
\newtheorem{lem}[thm]{Lema}
\newtheorem{prop}[thm]{Proposición}
\theoremstyle{definition}
\newtheorem{defn}[thm]{Definición}
\theoremstyle{remark}
\newtheorem{rem}[thm]{Observación}

% Atajos.
% Se pueden definir comandos nuevos para acortar cosas que se usan
% frecuentemente. Como ejemplo, aqu se definen la R y la Z dobles que
% suelen representar a los conjuntos de nmeros reales y enteros.
%--------------------------------------------------------------------------

\def\RR{\mathbb{R}}
\def\ZZ{\mathbb{Z}}

% De la misma forma se pueden definir comandos con argumentos. Por
% ejemplo, aqu definimos un comando para escribir el valor absoluto
% de algo ms fcilmente.
%--------------------------------------------------------------------------
\newcommand{\abs}[1]{\left\vert#1\right\vert}

% Operadores.
% Los operadores nuevos deben definirse como tales para que aparezcan
% correctamente. Como ejemplo definimos en jacobiano:
%--------------------------------------------------------------------------
\DeclareMathOperator{\Jac}{Jac}



\newcommand\portada{
\begin{titlepage}
		\begin{center}
			{\large \bf DESARROLLO DE UN PROTOTIPO WEB DE LAS ETAPAS DE TRANSFORMACION DE COORDENADAS Y PROYECCION DE ANIMACION 3D DE UNA LIBRERIA GRAFICA BASADA EN LA ESPECIFICACION ESTANDAR WEBGL Y HTML5 }
			\vfill
% 			{\large\bf PRESENTADO POR \par}
			{\large\bf LUCIA MEJIA QUICENO}
			\vfill
			{\large\bf UNIVERSIDAD TECNOLOGICA DE PEREIRA  \par}
			{\large\bf FACULTAD DE INGENIERÍAS \par}
			{\large\bf PROGRAMA INGENIERIA DE SISTEMAS Y COMPUTACION \par}
			{\large\bf PEREIRA \par}
			{\large\bf MAYO 2011 \par}
		\end{center}
\end{titlepage}
}

\newcommand\contraportada{
	\begin{titlepage}
		\begin{center}
			{\large \bf DESARROLLO DE UN PROTOTIPO WEB DE LAS ETAPAS DE TRANSFORMACION DE COORDENADAS Y PROYECCION DE ANIMACION 3D, DE UNA LIBRERIA GRAFICA BASADA EN LA ESPECIFICACION ESTANDAR WEBGL Y HTML5 } 
			\vfill
% 			{\large\bf PRESENTADO POR \par}
			{\large\bf LUCIA MEJIA QUICENO Cód 42.162.019}
			\vfill
			{\large\bf Proyecto de grado \par}
			\vfill
			{\large\bf Director: Magister Hugo Humberto Morales Peña
\par}
			\vfill
			{\large\bf UNIVERSIDAD TECNOLOGICA DE PEREIRA \par}
			{\large\bf FACULTAD DE INGENIERÍAS \par}
			{\large\bf PROGRAMA INGENIERIA DE SISTEMAS Y COMPUTACION \par}
			{\large\bf PEREIRA \par}
			{\large\bf MAYO 2011 \par}
		\end{center}
\end{titlepage}
}


%--------------------------------------------------------------------------
% \title{\LARGE \bf Plantilla para un artculo \LaTeX }
% % \vfill
% \author{El autor va aqu\\
%   \small Dept. Plantillas y Editores\\
%   \small E12345\\
%   \small Espaa
% }


\begin{document}
\portada
\contraportada


% \abstract{Esto es una plantilla simóíéññññple para un artculo en \LaTeX.}



\renewcommand\contentsname{\centering Tabla de Contenidos}
\tableofcontents
\clearpage

%\begin{titlepage}
%	\begin{center}
%		{\large \bf Introduccion}
%	\end{center}

%\end{titlepage}

\begin{center}
 \section{Introduccion}
este proyecto se termina dentro de poco y sera un muy buen proyecto y aprendere mucho, con fuerza
\end{center}
\clearpage

\begin{center}
 \section{Planteamiento del problema}
\end{center}
\subsection{Antecedentes}

Los avances tecnológicos en la computación gráfica han surgido de las
investigaciones y los experimentos que ha hecho el ser humano en esta área,
iniciando desde el diseño asistido por computador, luego avanzando hacia
la animación por computador 2D, 3D, la realidad virtual, la realidad aumentada y
desde hace unos años atrás el comienzo de la animación 3D en la web, la cual se
encuentra en desarrollo y donde empresas como Google, le están apuntando
fuertemente a esta nueva tecnología.
La web en la actualidad ha experimentado un crecimiento vertiginoso; cada día
más usuarios acceden a ella y son más los documentos, la información allí
contenida y las páginas web creadas que brindan algún tipo de servicio. Además
de esto, se tiende cada vez más a desarrollar aplicativos web, con la finalidad de
poder llegar a más usuarios, brindándoles más facilidades como a
desplazamientos y costos se refiere.
Cuando se accede a internet y se navega por diferentes páginas web, existen
paginas que para desplegar sus contenidos de manera parcial o total, se debe
hacer uso de los llamados “PLUGINS”, estos son complementos que deben ser
utilizados en la mayoría de los casos por los usuarios, con el fin de poder añadir
funcionalidades a algún sistema y no siempre van a servir para poder desplegar
el contenido de una página web, ya que en ocasiones presentan problemas de
compatibilidad con el navegador, con el S.O (Sistema Operativo), con la
seguridad, y además al ser ejecutados consumen muchos recursos en el
computador ocasionando un bajo rendimiento o dejando que este se quede
colgado. Flash es un ejemplo de un programa que requiere el uso de plugins, el
cual tiene inconvenientes con algunos navegadores, ya que si un usuario desea
ver una página web que tiene contenido hecho en flash y no ha descargado e
instalado en este caso el plugin de adobe, el contenido de la página no se podría
mostrar. En motores de búsqueda como Google y Yahoo, se presentan
problemas con ciertos enlaces, ya que las paginas pertenecientes a estos
enlaces no están hechas en HTML, por consiguiente no siguen sus estándares.
5
Entrando en el tema de la implementación de gráficos 3D en la web, existen
tecnologías estandar que permiten llevar a cabo el desarrollo de este tipo de
contenido en la web, como por ejemplo: el VRML \footnote{F. LUENGO, M. CONTRERAS, A. LEAL, y A. IGLESIAS. “Interactive 3D Graphics Applications Embedded in web Pages”in
proceedings of 2007 International Conference on Computer Graphics, Imaging and Visualisation, IEE Computer Society Press, pp 434-
440, 2007.} (tecnología con la cual se
construyo una librería para contenido 3D en la web llamada Glypher3D)\footnote{E.PINTO, G. AMADOR, A.GOMES. “A Graphics Library for Delivering 3D Contents on Web Browsers”.2009.} X3D,
X3DOM, Firefox Canvas 3D, Opera Canvas 3D, O3D, etc. Todas estas
tecnologías están relacionadas de alguna manera con los plugins. Entre la lista
de este tipo de herramientas se encuentra una nueva tecnología que permite el
manejo de este mismo contenido 3D en la web, con la diferencia de que no hace
uso de plugins. Es el estándar WEB GL, el cual es una aplicación nativa de los
navegadores Gecko y de los navegadores basados en WEBKIT. El hecho de no
trabajar con plugins brinda al usuario la facilidad de trabajar en la web, sin la
necesidad de descargar e instalar el plugin compatible con el programa, para
después poder llevar a cabo la ejecución de algún proceso.

\subsection{Formulacion del problema}
Mostrar a los usuarios contenido 3D en navegadores web por medio de una tecnología estándar es más rápido que al utilizar una tecnología de terceros como
son los plugins.
%\url{http://ieeexplore.ieee.org/stamp/stamp.jsp?tp=&arnumber=4293710}tomado de internet}
\clearpage

\begin{center}
 \section{Justificación}
\end{center}
EnEn la web se encuentran páginas las cuales requieren el uso de plugins o
complementos que permiten desplegar un contenido total o parcial de las
mismas. Se habla de un contenido parcial en cuyas páginas web existe cierta
cantidad de imágenes o contenido, los cuales solo pueden ser visualizados por
un usuario, después de haber realizado la instalación de un plug-in, teniendo en
cuenta que éstos en muchos casos presentan problemas de compatibilidad a
nivel de S.O o con el navegador. Debido a este inconveniente se propone llevar a
cabo la implementación de un prototipo web de una de las etapas de un macro
proyecto como es, el desarrollo de una librería gráfica de imágenes animadas 3D
en la web haciendo uso de la especificación estándar WebGl y el canvas del
html5. Donde la herramienta Web Gl no hace uso de plugins para el desarrollo de
gráficos en la web.
Se quiere iniciar la investigación sobre el desarrollo de contenido 3D en la web
sin hacer uso de plugins, ya que después de hacer un sondeo entre cierta
cantidad de tecnologías \footnote{(se incluyeron nuevas tecnologías, ademas de las contenidas en el articulo y se realizo un cuadro comparativo) M.MUNETA, M.
LUISA, F.MINDÁN, JESUS, R. REY, GREGORIO. “Últimas Tendencias en Gráficos Web3D Para internet”. Universidad Politécnica
de Madrid. Departamentos.unican.es/digteg/ingegraf/cd/ponencias/294.pdf.

{EDGAR M. PINTO.”A Graphics Pipeline for Directly Rendering 3D Scenes on Web Browser”. Master’s Thesis, University of Beira
Interior. Departament of Computer Sciencie. 2009.
}}  utilizadas para este fin, se llega a la siguiente
conclusión: de una muestra de 48 tecnologías web3d existentes en donde se
tuvieron en cuenta los siguientes parámetros: “nombre de la tecnología”,
“plataforma” y si es “necesario un plug-in”. Además de esto las tecnologías allí
mencionadas se clasificaron en, tecnologías web3d más conocidas, las que están
orientadas a CAD CAM \footnote{Tomado de:<http://www3.uji.es/~jperis/dfao/apuntes/tema1.pdf> CAD CAM: Disciplina que estudia el uso de sistemas informáticos
como herramienta de soporte en todos los procesos involucrados en el diseño y la fabricación de cualquier tipo de producto. Estas
están orientadas a la ingeniería simultanea permitiendo ver modelos, editarlos, obtener medidas físicas etc.
M.MUNETA, M. LUISA, F.MINDÁN, JESUS, R. REY, GREGORIO. “Últimas Tendencias en Gráficos Web3D Para internet”.
Universidad Politécnica de Madrid. Departamentos.unican.es/digteg/ingegraf/cd/ponencias/294.pdf.
} y tecnologías de menor impacto. Deduciendo a partir de
esa información que el 75% de las tecnologías empleadas para trabajar contenido
3d en la web, hacen uso de algún plug-in y el que el 25% restante no hace uso de
ellos. El no hacer uso de plugins facilita la visualización inmediata del contenido
de la(s) imagen(es) de una página web, un vídeo, el chat, o algún programa.
Además el tema de gráficos 3D en la web, es relativamente nuevo ya que inicio
desde el año 2006 con los primeros experimentos que hizo Mozilla para un
Canvas 3D y empresas grandes como Google le están apostando a estas nuevas
formas de desarrollo.
Como se mencionó en líneas anteriores el prototipo web a implementar, es el
desarrollo de la fase inicial de una librería gráfica la cual está dividida en 7 etapas
que se proponen ser trabajadas como diferentes proyectos de grados. Las etapas
son las siguientes: transformación de coordenadas, recorte o clipping, cálculo de
la iluminación, proyección, z-buffering, sombreado y la presentación de la imagen,
y de estas etapas, las que van a comprender la fase inicial es la transformación
de coordenadas y la proyección de imágenes
3D, las cuales permiten tomar una imagen aplicarle transformaciones básicas
como son la rotación, traslación o escalamiento y luego proyectar dicha imagen
sobre un plano respectivamente.
Como aporte cabe resaltar la importancia que tienen el álgebra lineal y los
conocimientos matemáticos, para el desarrollo de este proyecto. Lo cual puede
conllevar a despertar un interés por parte de los estudiantes en el estudio de las
matemáticas, por la cantidad de aplicaciones que esta tiene, siendo una de ellas
la computación gráfica. Y puede conllevar a la posibilidad de contar con un grupo
de investigación o semillero \footnote{Tomado de: <http://www.utp.edu.co/investigacion/semillerosFaculHTML.php?cod=243>,
<http://www.utp.edu.co/investigacion/gruposHTML.php>, Universidad Tecnológica de Pereira. Septiembre 04 de 2010
} formalmente establecido en la Universidad
Tecnológica, el cual pueda potencializar esta línea de investigación donde
estudiantes y profesores aborden temas referentes a la computación gráfica, se
logre el desarrollo de proyectos en conjunto considerando la existencia de
personas fascinadas con los vídeo juegos, la animación 2D, 3D y demás temas
relacionados con esta área. Y en particular se puede hablar del programa de
Ingeniería de sistemas y computación en la jornada especial, donde el material
desarrollado durante el proyecto podría servir de apoyo, en la orientación de la
asignatura computación gráfica, la cual solamente hace parte del pensum de este
programa. El desarrollo de prototipos encaminados hacia estos avances
tecnológicos donde se manejan gráficos 3D en la web, aporta conocimientos
fundamentales
necesarios en esta nueva etapa de desarrollo, pudiendo
beneficiar a la población académica para que haga uso de ello, se expanda a
nuevos proyectos y porque no a otras áreas de investigación.


\clearpage

\begin{center}
\section{Objetivos}
\end{center}

\subsection{Objetivo General}
Desarrollar un prototipo de librería grafica para las etapas de transformación de coordenadas y proyección de imágenes 3D animadas,
basándose en la especificación estándar WebGL y HTML 5.


\subsection{Objetivos Específicos}

 4.2.1 Investigar sobre la especificación estándar WebGL, el Canvas
del HTML 5 y los conceptos matemáticos que se utilizan en las etapas de
proyección y transformación de coordenadas de imágenes.

 4.2.2 Analizar el prototipo web de las etapas de transformación de
coordenadas y proyección de imágenes 3D animadas de una librería
gráfica.

 4.2.3 Diseñar el prototipo web de las etapas de transformación de
coordenadas y proyección de imágenes 3D animadas de una librería
gráfica.

 4.2.4 Implementar el prototipo web de las etapas de transformación de
coordenadas y proyección de imágenes 3D animadas de una librería
gráfica.

 4.2.5 Elaborar documentación de las bases (teórico-matemáticas)
fundamentales de cada una de las etapas a desarrollar.

 4.2.6 Realizar un plan de pruebas piloto a las etapas a propuestas.

\clearpage


\begin{center}
 \section{MARCO REFERENCIAL}
\end{center}
\subsection{MARCO CONCEPTUAL}
\subsubsection{Web Gl}
Web gl es una especificación estándar basada en Open Gl ES.2.0 la cual aprovecha la potencia de  este, para poder renderizar gráficos 3D acelerados por hardware, usando una API en un navegador web y sin la necesidad de utilizar plugins. El renderizado en web gl es similar al de Open Gl ES 2.0, la diferencia es que este lo hace en un contexto html, por ejemplo haciendo uso del Canvas del html5.
Los experimentos con web gl iniciaron a mediados del 2006 con el Canvas 3D en Mozilla. Para el 2007 Mozilla y opera habían hecho ya algunas implementaciones propias. En el 2009 Mozilla y Khronos dieron inicio al grupo de trabajo de web gl. Como miembros de este grupo, estan los principales proveedores de navegadores como Apple con safari, Google con el Chrome, Mozilla con Firefox, Opera con Opera.

Web gl fue creada por el consorcio de tecnología Khronos Group sin animo de lucro; dedicado a crear estándares abiertos para gráficos, computación paralela en diferentes plataformas y dispositivos. Es necesario aclarar que esta especificación aun no esta terminada. 
"Khronos Group fue fundado en Enero del 2.000 por varias empresas lideres en medios de comunicación como 3Dlabs, ATI, Discreet, Evans and Sutherland, Intel, NVIDIA, SGI y Sun Microsystem, hoy en dia tiene mas de 100 empresas asociadas, 30 adoptantes y esta conformada por 24 miembros. Su actual presidente se llama  Neil Trevett".\footnote{Tomado de internet: http://www.khronos.org/about/}.



\subsection{ANTECEDENTES ORGANIZARLOS}
La capacidad de poner acelerada por hardware de contenido 3D en el navegador proporcionará un medio para la creación de aplicaciones basadas en web nuevas que antes eran del dominio exclusivo del entorno de escritorio.  (sacado de la pagina de kronos group)


Qué sentido tiene esta tecnología para el usuario final?
Mucha. La representación de objetos en 3D sobre un navegador siempre ha estado atada a tecnologías propietarias que requerían la descarga de plug-ins o adiciones al navegador. WebGL es un estándar abierto al que pueden acogerse los desarrolladores para implementar en sus sitios web este tipo de contenidos que pueden desplegarse en muchos nichos de mercado: desde los juegos hasta la representación de ciudades sobre grandes mapas pasando por los más variopintos objetos necesarios para crear interfaces de usuario, sistemas de visualización de imágenes basados en profundidad y muchas, muchas cosas más.
Para aquellos desarrolladores interesados en esta tecnología, hay gran cantidad de recursos disponibles en Internet, aunque es conveniente pasar primero por la página del Khronos Group para descargar las especificaciones y contactar con otros usuarios que están trabajando actualmente en esta tecnología, especialmente a través del Wiki y del Foro.
El futuro del desarrollo web tiene diferentes caminos en función de las tecnologías que se implementan para ofrecer contenidos más ricos y accesibles a los usuarios en formatos visualmente más llamativos.\footnote{Tomado de internet:http://www.2mdc.com/blogs/desarrollo-web/webgl-llevando-los-grficos-3d-al-navegador }.




\clearpage



\begin{center}
\section{Metodología}
\end{center}
Debe mostrar, en forma organizada, y precisa, cómo serán alcanzados cada uno de los objetivos
específicos propuestos. Deben detallarse, los procedimientos, técnicas, instrumentos, actividades,
etapas y demás estrategias metodológicas requeridas para el proyecto.  Tenga en cuenta que el
diseño metodológico es la base para planificar todas las actividades que demanda el proyecto y para
determinar los recursos humanos y financieros requeridos.

Un esquema útil puede ser:
\begin{enumerate}
  \item Un objetivo específico
  \begin{enumerate}
    \item se alcanza a través de unas etapas
    \begin{enumerate}
      \item que incluyen unos procedimientos
      \begin{itemize}
        \item que usan técnicas
        \item ... e instrumentos
      \end{itemize}
    \end{enumerate}
  \end{enumerate}
\end{enumerate}

Tuve la oportunidad de ver algunos trabajos radicados oficialmente, en esta parte dichos trabajos
vinculan las metodologías de desarrollo de software elegidas cuando son proyectos de desarrollo.
\clearpage


\begin{center}
\section{Alcances}
\end{center}
Aquí se realiza una descripción mas precisa de lo que pretende el proyecto y de los resultados
tangibles del mismo.  Estos deben estar de acuerdo con los objetivos planteados (pero no son una
reformulación de los objetivos) y ser coherentes con la metodología planteada, con las capacidades
del grupo de trabajo y con los medios de los cuales se disponga.
\clearpage

\begin{center}
\section{Limitaciones}
\end{center}
Se debe indicar lo que no se va a realizar en el proyecto y las situaciones que podrian llegar a
limitar el alcance de los objetivos.
\clearpage

\begin{center}
\section{Recursos}
\end{center}
Se debe indicar el recurso humano, fisico, tecnológico necesario y disponible para llevar a cabo el
proyecto.
\clearpage

\begin{sidewaystable}
\begin{center}
\section{Cronograma}
\end{center}


\begin{center}

\begin{tabular}{l p{4cm} l p{4cm} l p{2cm} l p{2cm} l p{2cm} c p{2cm} c p{2cm} }
\toprule
\rowcolor[gray]{0.9}Objetivo específico & Descripción & Dependencias & Recursos  & Producto &
Inicio & Final \\
\midrule
Objetivo 0 & descripción 0 & depende de & recursos & se obtiene & semana 0 & semana 1 \\
\midrule
Objetivo 1 & descripción 1 & depende de & recursos & se obtiene & semana 2 & semana 3 \\
\bottomrule
\end{tabular}

\end{center}
\end{sidewaystable}
\clearpage



% Bibliografa.
%-----------------------------------------------------------------

\begin{thebibliography}{99}


\bibitem{Fogel05} Fogel, Karl.\emph{Producing Open Source Software, How to Run a
Successsful Free Software Project} Karl Fogel. 2005.

\bibitem{Huxley54} Huxley Aldous.\emph{The Doors of Perception}. Edhasa. 1954.

\end{thebibliography}

\end{document}
